@import "./reset.scss";

$ratio: 375 / 10;

@function px2rem($px) {
  @return $px / $ratio + rem
}

@mixin center () {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ebook-icon {
  color: #333;
  font-size: px2rem(20)
}

.slide-up-enter-active, .slide-up-leave-active{
  transition: all 300ms linear;
}
.slide-up-enter, .slide-up-leave-to {
  transform: translate3d(0,100%,0);
}
.slide-up-enter-to, .slide-up-leave {
  transform: translate3d(0,0,0);
}

.slide-down-enter-active, .slide-down-leave-active, {
  transition: all 300ms linear;
}
.slide-down-enter, .slide-down-leave-to {
  transform: translate3d(0,-100%,0);
}
.slide-down-enter-to, .slide-down-leave {
  transform: translate3d(0,0,0);
}

.slide-right-enter-active, .slide-right-leave-active, {
  transition: all 300ms linear;
}
.slide-right-enter, .slide-right-leave-to {
  transform: translate3d(-100%,0,0);
}
.slide-right-enter-to, .slide-right-leave {
  transform: translate3d(0,0,0);
}

.fade-enter-active,.fade-leave-active {
  transition: all 300ms linear;
}
.fade-enter,.fade-leave-to {
  opacity: 0;
}
.fade-leave,.fade-enter-to {
  opacity: 1;
}
